import { globalStyle, style } from '@vanilla-extract/css';

import { vars } from '@knno/ui/global.css';

globalStyle(':root', {
	vars: {
		[vars.font.baseSize]: '14px',
	},
});

globalStyle('body', {
	fontFamily: 'sans-serif',
	color: vars.color.regularText,
	backgroundColor: vars.color.pageBackground,
});

export const bar = style({
	display: 'flex',
	flexDirection: 'row',
	flexWrap: 'wrap',
	alignItems: 'center',
	marginBottom: '20px',
});

globalStyle(`${bar} > *`, {
	margin: '0.4em',
});
